<template>
  <div>
    <div class="nav">
      <img src="image/log.png" alt="" />
      <span class="title">博客系统</span>
      <span class="spacer"></span>
      <a href="/blog_list.html">主页</a>
      <a href="/blog_edit.html">写博客</a>
      <a href="/blog_login.html">注销</a>
    </div>

    <div class="container">
      <div class="container-left">
        <div class="card">
          <img :src="author.avatar" alt="" />
          <h3>{{ author.name }}</h3>
          <div class="counter">
            <span>文章</span><span>分类</span>
          </div>
          <div class="counter">
            <span>{{ author.blogCount }}</span><span>{{ author.categoryCount }}</span>
          </div>
        </div>
      </div>

      <div class="container-right">
        <div class="blog-content">
          <h3>{{ blog.title }}</h3>
          <div class="date">{{ blog.date }}</div>
          <div class="detail">
            <p v-for="(paragraph, index) in blog.content" :key="index">{{ paragraph }}</p>
          </div>

          <div class="blog-actions">
            <button class="btn-like" @click="likeBlog">👍 点赞</button>
            <button class="btn-fav" @click="favBlog">⭐ 收藏</button>
            <span class="blog-stats">已获赞：{{ blog.likes }} ｜ 收藏数：{{ blog.favs }}</span>
          </div>

          <div class="comment-section">
            <h4>评论</h4>
            <div class="comment-input">
              <textarea v-model="newComment" placeholder="写下你的评论..." rows="3"></textarea>
              <button class="btn-comment" @click="submitComment">发表评论</button>
            </div>

            <div class="comment-list">
              <div class="comment-item" v-for="(comment, index) in blog.comments" :key="index">
                <p><strong>{{ comment.user }}：</strong>{{ comment.content }}</p>
                <button class="btn-reply">回复</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogDetail',
  data() {
    return {
      blog: {
        title: '',
        date: '',
        content: [],
        likes: 0,
        favs: 0,
        comments: []
      },
      author: {
        name: '',
        avatar: 'image/head.png',
        blogCount: 0,
        categoryCount: 0
      },
      newComment: ''
    };
  },
  created() {
    this.fetchBlogDetail();
    this.fetchAuthorInfo();
  },
  methods: {
    fetchBlogDetail() {
      fetch('/api/blog/detail?id=1')
        .then(res => res.json())
        .then(data => {
          this.blog = data;
        });
    },
    fetchAuthorInfo() {
      fetch('/api/user/info?id=1')
        .then(res => res.json())
        .then(data => {
          this.author = data;
        });
    },
    likeBlog() {
      this.blog.likes++;
    },
    favBlog() {
      this.blog.favs++;
    },
    submitComment() {
      if (this.newComment.trim() === '') {
        alert('评论内容不能为空！');
        return;
      }
      alert('评论发表成功！');
      this.blog.comments.push({ user: '当前用户', content: this.newComment });
      this.newComment = '';
    }
  }
};
</script>

<style scoped>
body {
  font-family: "Noto Sans", sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  color: #333;
}

.blog-content {
  background-color: #ffffff;
  padding: 40px;
  max-width: 800px;
  margin: 40px auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.blog-content h3 {
  text-align: center;
  font-size: 32px;
  color: #222;
  margin-bottom: 10px;
}

.blog-content .date {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 30px;
}

.blog-content p {
  font-size: 17px;
  line-height: 1.9;
  text-indent: 2em;
  margin-bottom: 20px;
}

.nav {
  background-color: #2c3e50;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  color: #fff;
}

.nav img {
  height: 36px;
  margin-right: 12px;
}

.nav .title {
  font-size: 22px;
  font-weight: bold;
}

.nav .spacer {
  flex: 1;
}

.nav a {
  color: #ecf0f1;
  margin-left: 20px;
  text-decoration: none;
  font-size: 16px;
}

.nav a:hover {
  text-decoration: underline;
}

.blog-actions {
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-actions button {
  padding: 6px 12px;
  border: none;
  background-color: #2c7be5;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.blog-actions button:hover {
  background-color: #1a5bb8;
}

.blog-stats {
  margin-left: auto;
  font-size: 14px;
  color: #555;
}

.comment-section {
  margin-top: 40px;
}

.comment-section h4 {
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.comment-input textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  resize: vertical;
  margin-bottom: 10px;
}

.btn-comment {
  background-color: #2c7be5;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.comment-item .btn-reply {
  font-size: 13px;
  margin-top: 5px;
  background: none;
  border: none;
  color: #2c7be5;
  cursor: pointer;
}
</style>